<route lang="json5">
    {
      style: {
        navigationStyle: 'custom',
        navigationBarTitleText: '非客户需求单预警列表',
        enablePullDownRefresh: true,
      },
    }
</route>
<template>
    <page-meta :root-font-size="setting.rootFontSize"
        :page-style="`overflow:${selectSchemeShow ? 'hidden' : 'visible'};`"></page-meta>
    <view style="min-height: calc(100vh - 350rpx); padding: 0 20rpx; padding-top: 420rpx; background-color: #f2f2f1">
        <view class="tabbar">
            <wd-navbar style="min-height: 100rpx" title="非客户需求预警" :bordered="false" safeAreaInsetTop>
                <template #left>
                    <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
                </template>
				<!-- <template #right>
				  <button
				    class="cu-btn bg-gradual-blue round set-delay"
				    @click="delayDayVisible = true"
				  >
				    预警天数 {{ oldRemindDay }}
				  </button>
				</template> -->
            </wd-navbar>
            <view class="cu-bar search-container">
                <view class="search-form round">
                    <wd-input type="text" prop="invName" v-model="state.names" no-border clearable placeholder="请输入"
                        style="display: flex; align-items: center; width: 100%; height: 100%; padding: 0 20rpx"
                        @confirm="handleSearch" confirm-type="search" />
                    <text class="filter-icon cuIcon-searchlist" @click="filterIsShow = true"></text>
                </view>
                <view class="action">
                    <button @click="handleSearch()" class="cu-btn bg-gradual-green shadow-blur round"
                        style="margin-right: 10rpx">
                        查询
                    </button>
                </view>
            </view>
			<view class="action ">
			<button class="cu-btn bg-gradual-orange round set-delay "  style="margin-left: 30rpx" @click="delayDayVisible = true">预警天数 {{oldRemindDay}}</button>
			</view>
            <view class="tabs">
                <view v-for="(item, index) in tableList"
                    :class="['item', 'i' + index, item.value === activeTab ? 'on' : '']" :key="item.value"
                    @click="onTabChange(item.value)">
                    {{ item.label }}
                </view>
            </view>
        </view>

        <template v-for="item in dataList" :key="item.id">
            <card :_D="item" :isOpt="true" @refresh="refresh"></card>
        </template>
        <wd-loadmore :state="loadMore" finishedText="没有更多了" @reload="handleSearch()"></wd-loadmore>
        <wd-popup v-model="filterIsShow" position="bottom" :close-on-click-modal="false"
            custom-style="padding: 32rpx;border-top-left-radius:60rpx;border-top-right-radius:60rpx;" @close="handleClose">
            <view class="cu-dialog" @click.stop="">
                <view class="cu-bar bg-white">
                    <view class="action"></view>
                    <view class="action mks" @click="filterIsShow = false">取消</view>
                    <!-- <view class="action text-blue mks" @tap="handleSearch()">确定</view> -->
                </view>
                <view class="filter_container">
                    <view class="block">
                        <view class="label">需求类型</view>
                        <view class="row">
                            <wd-picker :columns="cusFlags" label="" v-model="state.cusFlag" placeholder="请选择需求类型"
                                style="width: 100%" />
                        </view>
                    </view>
                    <view class="block">
                        <view class="label">审核状态</view>
                        <view class="row">
                            <wd-picker :columns="statusList" label="" v-model="state.status" placeholder="请选择评审状态"
                                style="width: 100%" />
                        </view>
                    </view>
                    <view class="block">
                        <view class="label">开始日期</view>
                        <view class="row">
                            <uni-datetime-picker type="date" return-type="string" v-model="state.startTime"
                                placeholder="开始日期" />
                        </view>
                    </view>
                    <view class="block">
                        <view class="label">结束日期</view>
                        <view class="row">
                            <uni-datetime-picker type="date" return-type="string" v-model="state.endTime"
                                placeholder="结束日期" />
                        </view>
                    </view>
                    <view class="block">
                        <view class="row">
                            <view class="btn" @click="resetFilter">重置</view>
                            <view class="btn primary" @click="handleSearch()">确认</view>
                        </view>
                    </view>
                </view>
            </view>
        </wd-popup>
		<th-dialog title="设置预警天数" v-model:visible="delayDayVisible" align="middle" width="80%">
		  <template v-slot:content>
				<view class="delay-day">
					<wd-input type="number" v-model="remindDay" placeholder="请输入提前预警天数"/>
					<button class="cu-btn bg-gradual-blue set-delay" :loading="setDelayLoading" @click="setDelayHandle">确定</button>
				</view>
		  </template>
		</th-dialog>
    </view>
</template>

<script lang="ts" setup name="remind-demand-list">
import { useSetting } from '@/stores/setting';
import card from './card.vue';
import { formatByDayjs } from '@/utils/util';
import thDialog from '@/pages/pm/assay-report/component/th-dialog'

import { request } from '@/utils/request';
const dataList = ref([]);
const setting = useSetting();
const loadMore = ref<any>('finished');

const oldRemindDay = ref()
const remindDay = ref()
const delayDayVisible = ref(false)

const page = ref(1);
const loading = ref(false);
const setDelayLoading = ref(false);

const state = reactive({
    names: null,
    waringType: 0,
    status: '',
    review_status: '',
    startTime: null,
    endTime: null,
    cusFlag: '',
    ddate: null,
    descs: 'create_time',
    size: 20,
});


const cusFlags = ref([
    {
        label: '全部',
        value: ''
    },
    {
        label: '客户需求单',
        value: 0
    },
    {
        label: '非客户需求单',
        value: 1
    }
])

const statusList = ref([
    {
        label: '全部',
        value: ''
    },
    {
        label: '开立',
        value: 0,
    },
    {
        label: '审核中',
        value: 1,
    },
    {
        label: '通过',
        value: 2,
    },
    {
        label: '拒绝',
        value: 3,
    },
    {
        label: '关闭',
        value: 4,
    },

])

const resizeParams = (data) => {
    const o = {};
    Object.keys(data).forEach((item) => {
        if (data[item] !== null && data[item] !== '') {
            o[item] = data[item];
        }
    });
    return o;
};

const getData = () => {
    uni.showLoading();
    loading.value = true;
    const params = resizeParams(state);
    loadMore.value = 'loading';
    request({
        url: "/pm/rdDemand/remindDemandNotCusPage",
        method: 'get',
        data: {
            current: page.value,
            ...params,
        }

    })
        .then((res) => {
            if (res.code !== 0) {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                });
                return;
            }
            dataList.value = dataList.value.concat(res.data.records);
            if (res.data.records.length === state.size) {
                loadMore.value = 'loadEnd';
            } else {
                loadMore.value = 'finished';
            }
        })
        .catch((err) => {
            loadMore.value = 'finished';
            uni.showToast({
                title: err.data?.msg || err.msg,
                icon: 'none',
            });
        })
        .finally(() => {
            uni.hideLoading();
            loading.value = false;
            uni.stopPullDownRefresh();
        });
};

const goBack = () => {
    uni.navigateBack();
};

onLoad(() => {
    getData();
	getRdTaskConfig();
});

const filterIsShow = ref(false);
const handleSearch = (e?) => {
    // if (e !== undefined) {
    //   state.demandCode = e;
    // }
    console.log(demandDateList.value);
    let startDate = state.startTime
    let endDate = state.endTime

    if (endDate && new Date(startDate).getTime() > new Date(endDate).getTime()) {
        uni.showToast({
            title: '开始时间不能大于结束时间',
            icon: 'none',
            mask: true,
        });
        return;
    }

    if (endDate || startDate) {
        startDate = startDate ? formatByDayjs(startDate, 'YYYY-MM-DD 00:00:00') : '';
        endDate = endDate ? formatByDayjs(endDate, 'YYYY-MM-DD 23:59:59') : '';
        state['webSql'] = `demand_date between '${startDate}' and '${endDate}'`;
    } else {
        state['webSql'] = null;
    }
    dataList.value = [];
    page.value = 1;
    getData();
    filterIsShow.value = false;
};
const handleAdd = () => {
    uni.navigateTo({
        url: '/pages/pm/report/view',
    });
};

const activeTab = ref('0');
const tableList = ref([
    {
        label: '即期',
        value: '0',
        color: '#108ee9',
    },
    {
        label: '逾期',
        value: '1',
        color: '#d46b08',
    },
	{
	    label: '全部',
	    value: null,
	    color: '#108ee9',
	}
]);
const onTabChange = (e) => {
    activeTab.value = e;
    state.waringType = e;
    dataList.value = [];
    page.value = 1;
    handleSearch();
    // resetFilter();
};

onPullDownRefresh(() => {
    //重新获取
    // if (loading.value) return;
    // dataList.value = [];
    // page.value = 1;
    // getData();
    refresh();
});
onReachBottom(() => {
    if (loading.value) return;
    // page.value++;
    // getData();
    if (loadMore.value === 'loadEnd') {
        page.value++;
        getData();
    }
});

const refresh = () => {
    dataList.value = [];
    page.value = 1;
    getData();
};

uni.$on('refresh', () => {
    refresh();
});

const handleClose = () => {
    filterIsShow.value = false;
};

const resetFilter = () => {
    handleClose();
    state.cusFlag = null;
    state.searchContent = null;
    state.invName = null;
    state.startTime = "";
    state.endTime = "";
    demandDateList.value = [];
    handleSearch();
};

const demandDateList = ref(['', '']);
const displayFormatTabLabel = (items) => {
    return `${items[0].label}年${items[1].label}月${items[2].label}日`;
};

const getRdTaskConfig = ()=>{
	request({
	    url: "/pm/rdTaskConfig/getWarning",
	    method: 'GET',
	    data:{name:'非客户预警'}

	}).then((res) => {
		if (res.code === 0) {
		   remindDay.value = res.data.remindDay
		   oldRemindDay.value = res.data.remindDay
		}
	})
}


const setDelayHandle = ()=>{
	 if(!/(^[0-9]\d*$)/.test(remindDay.value) || /^0{2,}/.test(remindDay.value)){
		 uni.showToast({
			 title:'输入不小于0的整数',
			 icon:'none'
		 })
		 return;
	 }
	 if(setDelayLoading.value) return;
	 setDelayLoading.value=true;
	  request({
		  url: "/pm/rdTaskConfig/updateWarning",
		  method: 'PUT',
		  data:{name:'非客户预警',remindDay: remindDay.value}

	  }).then((res) => {
		if (res.code === 0) {
		   uni.showToast({
			  title:'设置成功'
		   })
		   oldRemindDay.value = remindDay.value;
		   delayDayVisible.value = false;
           setTimeout(()=>{
			 refresh();
		   },1500)
		   return;
		}
		uni.showToast({
		    title: res.msg,
		    icon: 'none',
		});
	  }).catch((err)=>{
		  uni.showToast({
		      title: err.data?.msg || err.msg,
		      icon: 'none',
		  });
	  }).finally(()=>{
		  setDelayLoading.value = false
	  })
}
</script>

<style lang="scss" scoped>
$padding: 30rpx;

button{
	outline:none;
	border:0;
}
:deep(.wd-navbar__right--hover) {
    background: none;
}
.delay-day{
	display:flex;
	padding:50rpx 30rpx;
	height:52rpx;
	align-items: center;
	.wd-input{
		flex:1;
		display:flex;
		align-items:center;
		height:100%;
		padding: 5rpx 20rpx;
		margin-right:30rpx;
	}
}

.canvas-box {
    .canvas {
        height: 300rpx;
        transition: height 0.3s;
    }

    .btns {
        margin-top: 10rpx;
        transition: transform 0.3s;

        .btn {
            width: auto;
            height: 50rpx;
        }
    }
}

.full-screen {
    flex-direction: row;
    height: calc(100vh - 88rpx);

    .canvas {
        width: calc(100% - 100rpx);
        height: 100%;
        margin-left: 100rpx;
    }

    .btns {
        position: absolute;
        align-items: center;
        width: calc(100vh - (88rpx + $padding * 2));
        height: 100rpx;
        transform: translate(100rpx, 0) rotate(90deg);
        transform-origin: top left;

        .btn-box {
            flex-direction: row;
        }
    }
}

.tabbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.tabbar_c {
    height: 100%;
    font-weight: 800;
    color: white;
    letter-spacing: 2px;
    background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.bolck {
    background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.task_list {
    background: #f7f7f7;
}

.cu-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
}

.cu-bar .search-form {
    display: flex;
    flex: 1;
    align-items: center;
    height: 64rpx;
    margin: 0 30rpx;
    overflow: hidden;
    /* padding: 0 40rpx; */
    font-size: 24rpx;
    line-height: 64rpx;
    color: #333;
    background-color: white;
}

.search-container .filter-icon {
    padding: 0 18rpx;
    margin: 0;
    font-size: 40rpx;
    color: #007aff;
    border-left: 1rpx solid #f3f3f3;
}

.round {
    border-radius: 2500px;
}

.cu-bar .search-form+.action {
    margin-right: 30rpx;
}

.cu-bar .action {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 100%;
}

.search-container .action .cu-btn {
    padding: 0 24rpx;
}

.bg-gradual-green {
    color: #fff;
    background-image: linear-gradient(45deg, #39b54a, #8dc63f);
}

.bg-gradual-blue {
    color: #fff;
    background-image: linear-gradient(45deg, #0c62d3, #2a73d3);
}
.bg-gradual-orange {
    color: #fff;
    background-image: linear-gradient(45deg, #d36a1f, #d39d14);
}

.cu-btn {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64rpx;
    padding: 0 30rpx;
    margin-right: initial;
    margin-left: initial;
    overflow: visible;
    font-size: 28rpx;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 0;
    transform: translate(0, 0);
}

.tabs {
    display: flex;
    justify-content: space-between;
    padding: 0 50rpx;
    margin-top: 15rpx;

    .item {
        position: relative;
        padding: 15rpx 0;
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        opacity: 0.5;
        transition: all 0.3s;

        &.on {
            opacity: 1;

            &::after {
                position: absolute;
                bottom: -8rpx;
                left: 50%;
                width: 12rpx;
                height: 12rpx;
                content: '';
                background: #f1f1f1;
                border-radius: 50%;
                transform: translate(-50%);
            }
        }
    }
}

// :deep(.wd-navbar) {
//     background: inherit;
// }

.cu-dialog {
    font-size: 28rpx;
}

.cu-dialog>.cu-bar:first-child .action {
    margin-right: 20rpx;
}

.filter_container {
    padding: 32rpx;
    padding-bottom: 64rpx;
    text-align: left;
    background-color: #fff;

    .block {
        ~.block {
            margin-top: 32rpx;
        }

        .label {
            margin-bottom: 20rpx;
            font-weight: bold;
        }
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .date-picker {
            flex: 1;
            padding: 16rpx;
            text-align: center;
            background-color: #f7f7f7;
            border-radius: 8rpx;
        }

        .select-box {
            flex: 1;
            padding: 16rpx;
            background-color: #f7f7f7;
            border-radius: 8rpx;

            :deep(.select-row) {
                padding: 0;
                background: none;
            }
        }

        input {
            flex: 1;
            height: 33rpx;
            padding: 16rpx 12rpx;
            font-size: 26rpx !important;
            background-color: #f7f7f7;
            border: 1rpx solid #f7f7f7;
            border-radius: 8rpx;

            .input-placeholder {
                color: #8a929f;
            }
        }

        .btn {
            flex: 1;
            padding: 16rpx;
            color: #999;
            text-align: center;
            background-color: #f7f7f7;
            border: 1rpx solid #dedede;
            border-radius: 8rpx;

            ~.btn {
                margin-left: 24rpx;
            }

            &.primary {
                color: #fff;
                background-color: #007aff;
                border-color: #007aff;
            }
        }
    }
}

:deep(.wd-navbar__left--hover) {
    background: none;
}

.s-date {
    .wd-picker__cell {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}
</style>
